class RenderSJ extends Render {
  constructor() {
    super()
    this.getData()
  }

  getData() {
    let renderSJ_this = this
    //获取用户名
    let username = getCookie(`username`)
    //渲染书架上的书本
    $.ajax({
      type: "GET",
      url: "../server/getbook.php",
      data: `username=${username}`,
      dataType: "json",
      success: function (response) {
        //渲染书本
        renderSJ_this.renderSJ(response)
        //渲染完后回调
        renderSJ_this.clickCallback(username)
      }
    })
  }

  //渲染书本
  renderSJ(data) {
    let renderSJ_this = this
    if (data.length > 0) {
      let renderBS_a = ``
      let renderBS_b = ``
      for (let i = 0; i < data.length; i++) {
        renderBS_a += `
        <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-wrap" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data[i].bid}'">
          <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-cover"><img data-v-5edee3f1="" data-v-62c31e8d=""
              src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data[i].bid%1000}/${data[i].bid}/b_${data[i].bid}.jpg" alt=""
              class="ypc-book-cover">
            <div data-v-5edee3f1="" data-v-62c31e8d="" class="update">更新</div>
            <div data-v-5edee3f1="" data-v-62c31e8d="" class="checkbox" style="display:none"></div>
          </div>
          <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-title">${data[i].bname}</div>
          <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-info"><span data-v-5edee3f1=""
              data-v-62c31e8d=""></span></div>
        </div>
        `
      }
      renderBS_b = `
      <div data-v-5edee3f1="">
      <div data-v-5edee3f1="" class="btn-wrap">
        <div data-v-5edee3f1="" class="btn-item"><button data-v-a9885818="" data-v-5edee3f1=""
            class="ypc-btn ypc-btn-primary ypc-btn-normal ypc-btn-block"><span data-v-a9885818="">编辑</span></button></div>
        <!---->
      </div>
      <div data-v-62c31e8d="" data-v-5edee3f1="" class="ypc-list">
        <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-list">
          ${renderBS_a}
          <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-wrap bookHome">
            <div data-v-5edee3f1="" data-v-62c31e8d="" class="book-cover plus"></div>
          </div>
        </div>
        <!---->
        <div data-v-62c31e8d="" class="bottom finished">
          已显示全部
        </div>
      </div>
     </div>
      `
      // $(`.page-shelf`).html(renderBS_b)
      renderSJ_this.renderHTML($(`.page-shelf`), renderBS_b)
    } else {
      let renderBS_b = `
      <div data-v-5edee3f1="">
      <div data-v-62c31e8d="" data-v-5edee3f1="" class="ypc-list">
        <div data-v-5b0bff54="" data-v-5edee3f1="" class="empty book-shelf-empty">
          <div data-v-5b0bff54="" class="empty-img"><img data-v-5b0bff54="" src="../static/empty.f2a09bc.png" alt="">
          </div>
          <div data-v-5b0bff54="" class="empty-description">空空如也</div>
          <p data-v-5edee3f1="" data-v-5b0bff54="" class="tip">赶快用好书塞满书架</p> <button data-v-a9885818="" data-v-5edee3f1=""
            class="ypc-btn ypc-btn-primary ypc-btn-normal ypc-btn-null" data-v-5b0bff54="" style="width: 180px;"><span
              data-v-a9885818="">去找书</span></button>
        </div>
      </div>
    </div>
      `
      // $(`.page-shelf`).html(renderBS_b)
      renderSJ_this.renderHTML($(`.page-shelf`), renderBS_b)

    }

  }
  //点击事件 异步
  async clickCallback(username) {
    let renderSJ_this = this
    //编辑模式
    let count = 0
    //编辑模式下渲染选择按钮
    await new Promise((a, b) => {
      $(`.btn-item`).click(function () {
        count++
        if (count % 2 == 1) {
          $(this).after(`
          <div data-v-5edee3f1="" class="btn-item btn-up"><button data-v-a9885818="" data-v-5edee3f1=""
          class="ypc-btn ypc-btn-primary ypc-btn-normal ypc-btn-all"><span data-v-a9885818="">全选</span></button> <button
          data-v-a9885818="" data-v-5edee3f1="" class="ypc-btn ypc-btn-danger ypc-btn-normal ypc-btn-del"
          style="margin-left: 16px;"><span data-v-a9885818="">删除(0本)</span></button></div>
          `)

          $(`.checkbox`).each(function () {
            $(this).css(
              `display`, `block`)
          })

          $(`.book-wrap`).each(function () {
            $(this).removeAttr("onclick")
          })

          a()
        } else {
          renderSJ_this.getData()
        }
      })

      //跳转主页
      $(`.ypc-btn-null`).click(function () {
        window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-home.html`
      })
      $(`.bookHome`).click(function () {
        window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-home.html`
      })
    })

    //渲染按钮后的监听事件
    await new Promise((a, b) => {
      let count_b = 0
      let count_c = 0

      $(`.ypc-btn-all`).click(function () {
        count_b++
        if (count_b % 2 == 1) {
          //所有钩打上
          $(`.book-wrap`).each(function () {
            $(this).addClass(`oncheked`)
          })
          //所有钩蓝色
          $(`.checkbox`).each(function () {
            $(this).addClass(`checked`)
          })
          //实时监控书本数
          count_c = $(`.checkbox`).length //最大本
          $(`.ypc-btn-del`).children(`span`).text(`删除${count_c}本`)
          $(this).children(`span`).text(`取消全选`)
        } else {
          //所有钩去掉
          $(`.book-wrap`).each(function () {
            $(this).removeClass(`oncheked`)
          })
          //所有钩白色
          $(`.checkbox`).each(function () {
            $(this).removeClass(`checked`)
          })
          //实时监控书本数
          count_c = 0 //0本
          $(`.ypc-btn-del`).children(`span`).text(`删除${count_c}本`)
          $(this).children(`span`).text(`全选`)
        }
      })

      $(`.book-wrap`).each(function () {
        let count_a = 0
        $(this).click(function () {
          count_a++
          if (count_a % 2 == 1) {
            $(this).addClass(`oncheked`)
            $(this).children(`.book-cover`).children(`.checkbox`).addClass(`checked`)
            count_c++
            $(`.ypc-btn-del`).children(`span`).text(`删除${count_c}本`)
          } else {
            $(this).removeClass(`oncheked`)
            $(this).children(`.book-cover`).children(`.checkbox`).removeClass(`checked`)
            count_c--
            $(`.ypc-btn-del`).children(`span`).text(`删除${count_c}本`)
          }
          if ($(`.checkbox`).length == $(`.oncheked`).length) {
            $(`.ypc-btn-all`).children(`span`).text(`取消全选`)
          } else {
            $(`.ypc-btn-all`).children(`span`).text(`全选`)
          }
        })
      })

      $(`.ypc-btn-del`).click(function () {
        $(`.oncheked`).each(function () {
          let title = $(this).children(`.book-title`).text()
          $.ajax({
            type: "GET",
            url: "../server/delbook.php",
            data: `username=${username}&bname=${title}`,
            dataType: "json",
            success: function (response) {
              renderSJ_this.getData()
            }
          })
        })
      })
    })
  }

}